// 登录条例组件
import React, { useEffect, useState } from 'react';
import { Checkbox, message, Modal, Skeleton } from 'antd';
import './index.less';

// 获取条例内容接口（不走dva 直接调接口）
// import { getRegContent } from '@/services/docTemplate/docTemplateService';

function Index(props: {
    onCheckChange?: (flag: boolean) => void;
}) {
    const { onCheckChange } = props; // 父组件 事件

    const [visible, setVisible] = useState<boolean>(false); //  预览modal展示标志
    const [content, setContent] = useState<string>(''); // 条例预览信息
    const [skeletonLoading, setSkeletonLoading] = useState<boolean>(true); // 页面缓冲状态
    const [regDocTitle, setRegDocTitle] = useState<string>(''); // 预览modal框标题

    // 条例初始化信息
    const regData = [
        { text: '《平台服务协议》', value: 'ptfwxy', title: '平台服务协议' },
        { text: '《平台隐私政策》', value: 'ptyszc', title: '平台隐私政策' },
        { text: '《个人信息保护政策》', value: 'grxxbhzc', title: '个人信息保护政策' }
    ];

    // 我已阅读并同意 onChange 事件
    const onChange = ({ target: { checked } }) => {
        onCheckChange(checked);
    }

    // 条例点击预览
    const handleRegClick = (info: { text: string; value: string; title: string; }) => {
        const { value: type, title } = info;
        setVisible(true);
        setSkeletonLoading(true);
        setRegDocTitle(title);
        // getRegContent({ type }).then(res => {
        //     const { code, data, msg } = res;
        //     if (code === 1) {
        //         setContent(data);
        //     } else {
        //         message.error(msg);
        //     }
        // }).finally(() => {
        //     setSkeletonLoading(false);
        // });
    }

    // 预览框关闭事件
    const modalCancel = () => {
        setVisible(false);
    }

    // 预览框关闭后回调
    const afterClose = () => {
        setContent('');
    }

    return (
        <div className='loginReg'>
            {/* 我已阅读并同意 */}
            <Checkbox onChange={onChange}>我已阅读并同意</Checkbox>
            {/* 协议列表 */}
            <div className='loginRegList'>
                {
                    regData.map(v => {
                        const { text, value } = v;
                        return <a key={value} onClick={() => { handleRegClick(v) }}>{text}</a>
                    })
                }
            </div>
            {/* 文档预览弹出层 */}
            <Modal
                visible={visible}
                maskClosable={false}
                onCancel={modalCancel}
                width={1000}
                getContainer='.loginReg'
                footer={null}
                destroyOnClose
                afterClose={afterClose}
            >
                <div className='regView'>
                    {/* 标题 */}
                    <div className='regDocTitle'>{regDocTitle}</div>
                    {/* 文档内容 */}
                    <Skeleton loading={skeletonLoading} active={true} paragraph={{rows: 19}}>
                        <div className='regDocContent' dangerouslySetInnerHTML={{ __html: content }}></div>
                    </Skeleton>
                    {/* 确认 */}
                    <div className='bottomOption'>
                        <span onClick={modalCancel}>我知道了</span>
                    </div>
                </div>
            </Modal>
        </div>
    );
}

export default Index;